import React from 'react';
import { Spin } from 'antd';
import { isEqual, isEmpty } from 'lodash';
import { WeaErrorPage, WeaTools,WeaLocaleProvider, WeaTable } from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
const { ls } = WeaTools;
import Title from './Title';
import { Timeline, Icon } from 'antd';
import { setContentviewHeight } from '../../util/common';
/*import './horizontal.css';*/
/*import   {fun1} from  './horizontal.js';*/
/*import './vertical_1.css';*/

import Vertical_1 from './vertical_1/vertical_1';
import Vertical_2 from './vertical_2/vertical_2';
import Vertical_3 from './vertical_3/vertical_3';
import Vertical_4 from './vertical_4/vertical_4';
import Vertical_5 from './vertical_5/vertical_5';
import Horizontal_1 from './horizontal_1/horizontal_1';
import Horizontal_2 from './horizontal_2/horizontal_2';
import Horizontal_3 from './horizontal_3/horizontal_3';
import Horizontal_4 from './horizontal_4/horizontal_4';
import Horizontal_5 from './horizontal_5/horizontal_5';


class EContent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tabdata: props.edata.data,
            currentTab: this.props.edata.currenttab,
            refresh: false,
            datainfo:props.edata.data.data,
            contentBgColor:props.edata.contentBgColor||''
        }
        this.toggleTabPage = this.toggleTabPage.bind(this);
        this.handleTabData = this.handleTabData.bind(this);
        this.onRef=this.onRef.bind(this);
        this.updateData=this.updateData.bind(this);
    }

    toggleTabPage(tabid){
        const { currentTab } = this.state;
        this.setState({
            refresh: !(tabid === currentTab),
        });
        this.handleTabData(tabid);
    }
    componentWillReceiveProps(nextProps){
        const { isremembertab } = nextProps.config;
        if(!isEqual(this.props, nextProps)){
                this.setState({
                    tabdata: nextProps.edata.data,
                    currentTab: nextProps.edata.currenttab,
                    datainfo:nextProps.edata.data.data,
                    refresh: false,
                });

        }
    }


    refreshTabData(){
        const { currentTab } = this.state;
        this.setState({
            refresh: true,
        });
        this.handleTabData(currentTab);
    }
    updateData(){
        this.child.updateData();
    }

    handleTabData(tabid){

        const {tabdata={}}=this.state;
        const { tabSetting ={}}=tabdata;
        const {styleValue}=tabSetting;

        const { params, isremembertab } = this.props.config;
        const tabdata_local = ls.getJSONObj('tabdata-' + params.eid + '-' + tabid);
        this.setState({
            currentTab: tabid,
            tabdata: tabdata_local == null ? {} : tabdata_local,
        });

        if(isremembertab){
            let edata = ls.getJSONObj('edata-' + params.eid);
            if(edata){
                edata.currenttab = tabid;
                edata.data = tabdata_local;
                ls.set('edata-' + params.eid, edata);
            }
        }

        WeaTools.callApi('/api/portal/element/timeline', 'POST', {...params, tabid}).then(result => {
            ls.set('tabdata-' + params.eid + '-' + tabid, result);
            if(tabid === this.state.currentTab){
                this.setState({
                    tabdata: result.data,
                    refresh: false,
                    datainfo:result.data.data

                });

                if(isremembertab){
                    let edata = ls.getJSONObj('edata-' + params.eid);
                    if(edata){
                        edata.currenttab = tabid;
                        edata.data = result;
                        ls.set('edata-' + params.eid, edata);
                    }
                }
            }
        });

    }

    componentDidMount(){
        const {edata}=this.props
        this.props.onRef(this);
    }

    onRef=(ref)=>{
        this.child = ref
    }

    render() {
        const { config, edata, handleRefresh, handleDelete, fontSizeMp } = this.props;
        const { tabdata, refresh ,currentTab,datainfo,contentBgColor} = this.state;

        let dataInfo=edata.data.data;

        const { tabids = [], titles =[], esetting={}, counts} = edata;
        const { tabSetting = {}, data = []} = tabdata;
        let {styleValue}=tabSetting;
        if(styleValue=="-1"){
            styleValue='1';
        }
        const { eid, ebaseid } = config.params;
        let { fontStyle,header} = config.item;
        const { contentview = {} } = config.item;
        if(!isEmpty(fontSizeMp)) fontStyle = fontSizeMp;
        esetting.fontStyle = fontStyle;

        // const cstyle = tabids && tabids.length > 1 && contentview.style && contentview.style.height ? {height: parseInt(contentview.style.height)-32+"px",overflow: "auto"} : {};  
        let cstyle = {};
        if(header.displayPosition && header.displayPosition == 'bottom'){
            if(tabids && tabids.length > 1 || tabids && tabids.length == 1 && esetting.isAlwaysShow=='1'){
                if(contentview.style.height){
                    if(esetting.tabstyle == '1' && esetting.tabvalue){
                        cstyle = setContentviewHeight(contentview.style.height,esetting.tabvalue)
                    }else{
                        cstyle = {height: parseInt(contentview.style.height)-32+"px",overflow: "auto"};
                    } 
                }else {
                    cstyle = {height: contentview.style.height,overflow: "auto"};
                }
                let elementH=parseInt(contentview.style.height)-parseInt($(`#titleContainer_${eid}`).css('height'));
                if(elementH!=parseInt(cstyle.height)){
                    if(elementH<parseInt(cstyle.height)){
                        cstyle.height=elementH+"px";
                    }
                }
            }
        }

        let more = '';
        let tabdata_img = {};
        if(!isEmpty(tabdata)){
            tabdata_img = _.cloneDeep(tabdata);
        }

        const _titleProps = {
            currentTab,
            config,
            titles,
            tabids,
            handleRefresh,
            handleDelete,
            more,
            counts,
            fontSizeMp,
            isAlwaysShow: esetting.isAlwaysShow,
            eMoreAddress: tabSetting.eMoreAddress,
            tabwidth: esetting.tabwidth,
            methodvalue: esetting.methodvalue,
            tabstyle: esetting.tabstyle,
            tabvalue: esetting.tabvalue,
            handleTabData: this.handleTabData
        }

        let elementStyle=<div></div>
        if(styleValue != undefined && styleValue != ""){
            switch(styleValue){
                case '1': elementStyle=<Vertical_1 ecId={`${this && this.props && this.props.ecId || ''}_Vertical_1@lx6fo8`}  datainfo={datainfo} eid={eid} fontStyle={fontStyle} ref="vertical" onRef={this.onRef}/>;break;
                case '2': elementStyle=<Vertical_2 ecId={`${this && this.props && this.props.ecId || ''}_Vertical_2@ewjocs`}  datainfo={datainfo} contentBgColor={contentBgColor} />;break;
                case '3': elementStyle=<Vertical_3 ecId={`${this && this.props && this.props.ecId || ''}_Vertical_3@neixij`}  datainfo={datainfo} />;break;
                case '4': elementStyle=<Vertical_4 ecId={`${this && this.props && this.props.ecId || ''}_Vertical_4@fh94bf`}  datainfo={datainfo} />;break;
                case '5': elementStyle=<Vertical_5 ecId={`${this && this.props && this.props.ecId || ''}_Vertical_5@7g397i`}  datainfo={datainfo} />;break;
                case '6': elementStyle=<Horizontal_1 ecId={`${this && this.props && this.props.ecId || ''}_Horizontal_1@4pv4ec`}  datainfo={datainfo} eid={eid} handleRefresh={handleRefresh}  contentBgColor={contentBgColor} onRef={this.onRef}/>;break;
                case '7': elementStyle=<Horizontal_2 ecId={`${this && this.props && this.props.ecId || ''}_Horizontal_2@dqg45g`}  datainfo={datainfo} eid={eid} handleRefresh={handleRefresh} contentBgColor={contentBgColor} onRef={this.onRef} />;break;
                case '8': elementStyle=<Horizontal_3 ecId={`${this && this.props && this.props.ecId || ''}_Horizontal_3@dhbij4`}  datainfo={datainfo} eid={eid} handleRefresh={handleRefresh} contentBgColor={contentBgColor} onRef={this.onRef}/>;break;
                case '9': elementStyle=<Horizontal_4 ecId={`${this && this.props && this.props.ecId || ''}_Horizontal_4@qlnuw8`}  datainfo={datainfo} eid={eid} handleRefresh={handleRefresh} onRef={this.onRef}/>;break;
                case '10': elementStyle=<Horizontal_5 ecId={`${this && this.props && this.props.ecId || ''}_Horizontal_5@vadd5b`}  datainfo={datainfo} eid={eid} handleRefresh={handleRefresh} onRef={this.onRef} />;break;
                default:elementStyle=<div></div>;
            }
        }

        return <div>
        <Title ecId={`${this && this.props && this.props.ecId || ''}_Title@y8hpr5`} {..._titleProps}/>
        <div className="tabContant" id={`tabcontant_${eid}`} style={{height: cstyle.height,'overflow-y':'auto'}}>
        <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@hvt2lu`} spinning={refresh}>
            {elementStyle}
        </Spin>
            </div>
            </div>;
    }
}

class MyErrorHandler extends React.Component {
    render() {
        const hasErrorMsg = this.props.error && this.props.error !== "";
        return ( <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@djqvse`} msg = { hasErrorMsg ? this.props.error : getLabel(385218,"对不起，该页面异常，请联系管理员！") }/>
    );
    }
}

EContent = WeaTools.tryCatch(React, MyErrorHandler, { error: "" })(EContent);
export default  EContent;